<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 flex items-center justify-center p-4">
    <div class="w-full max-w-md">
      <!-- 登录卡片 -->
      <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 shadow-2xl">
        <!-- 标题 -->
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold text-white mb-2">欢迎回来</h1>
          <p class="text-slate-300">请登录您的账户</p>
        </div>

        <!-- 登录表单 -->
        <form @submit.prevent="handleSubmit" class="space-y-6">
          <!-- 邮箱输入 -->
          <div>
            <label for="email" class="block text-sm font-medium text-slate-200 mb-2">
              邮箱地址
            </label>
            <input 
              v-model="form.email"
              type="email" 
              id="email" 
              name="email"
              :class="[
                'w-full px-4 py-3 bg-white/5 border rounded-lg text-white placeholder-slate-400',
                'focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-300',
                emailError ? 'border-red-500 focus:ring-red-500' : 'border-white/20 focus:ring-blue-500'
              ]"
              placeholder="请输入您的邮箱"
              required
            >
            <p v-if="emailError" class="mt-1 text-sm text-red-400">{{ emailError }}</p>
          </div>

          <!-- 密码输入 -->
          <div>
            <label for="password" class="block text-sm font-medium text-slate-200 mb-2">
              密码
            </label>
            <div class="relative">
              <input 
                v-model="form.password"
                :type="showPassword ? 'text' : 'password'" 
                id="password" 
                name="password"
                :class="[
                  'w-full px-4 py-3 bg-white/5 border rounded-lg text-white placeholder-slate-400 pr-12',
                  'focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-300',
                  passwordError ? 'border-red-500 focus:ring-red-500' : 'border-white/20 focus:ring-blue-500'
                ]"
                placeholder="请输入您的密码"
                required
              >
              <button
                type="button"
                @click="showPassword = !showPassword"
                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
              >
                {{ showPassword ? '🙈' : '👁️' }}
              </button>
            </div>
            <p v-if="passwordError" class="mt-1 text-sm text-red-400">{{ passwordError }}</p>
          </div>

          <!-- 记住我 -->
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input 
                v-model="form.remember"
                type="checkbox" 
                id="remember" 
                name="remember"
                class="w-4 h-4 text-blue-600 bg-white/10 border-white/20 rounded focus:ring-blue-500 focus:ring-2"
              >
              <label for="remember" class="ml-2 text-sm text-slate-300">
                记住我
              </label>
            </div>
            <a href="#" class="text-sm text-blue-400 hover:text-blue-300 transition-colors">
              忘记密码？
            </a>
          </div>

          <!-- 登录按钮 -->
          <button 
            type="submit"
            :disabled="isLoading"
            :class="[
              'w-full font-semibold py-3 px-4 rounded-lg transition-all duration-300',
              'focus:outline-none focus:ring-4 focus:ring-blue-300/50',
              isLoading 
                ? 'bg-gray-500 cursor-not-allowed' 
                : 'bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white transform hover:scale-105'
            ]"
          >
            <span v-if="isLoading" class="flex items-center justify-center">
              <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              登录中...
            </span>
            <span v-else>登录</span>
          </button>
        </form>

        <!-- 分割线 -->
        <div class="my-6 flex items-center">
          <div class="flex-1 border-t border-white/20"></div>
          <span class="px-4 text-sm text-slate-400">或</span>
          <div class="flex-1 border-t border-white/20"></div>
        </div>

        <!-- 社交登录 -->
        <div class="space-y-3">
          <button 
            v-for="provider in socialProviders"
            :key="provider.name"
            @click="handleSocialLogin(provider.name)"
            class="w-full bg-white/5 hover:bg-white/10 border border-white/20 text-white py-3 px-4 rounded-lg 
                   transition-all duration-300 flex items-center justify-center space-x-2"
          >
            <span>{{ provider.icon }}</span>
            <span>使用 {{ provider.name }} 登录</span>
          </button>
        </div>

        <!-- 注册链接 -->
        <div class="mt-6 text-center">
          <p class="text-slate-400">
            还没有账户？ 
            <a href="#" class="text-blue-400 hover:text-blue-300 transition-colors font-medium">
              立即注册
            </a>
          </p>
        </div>

        <!-- 表单状态显示 -->
        <div v-if="Object.keys(form).length" class="mt-6 p-4 bg-white/5 rounded-lg">
          <h4 class="text-sm font-medium text-slate-200 mb-2">表单状态 (开发模式):</h4>
          <pre class="text-xs text-slate-400">{{ JSON.stringify(form, null, 2) }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

// 表单数据
const form = reactive({
  email: '',
  password: '',
  remember: false
})

// 状态管理
const isLoading = ref(false)
const showPassword = ref(false)

// 表单验证
const emailError = computed(() => {
  if (!form.email) return ''
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(form.email) ? '' : '请输入有效的邮箱地址'
})

const passwordError = computed(() => {
  if (!form.password) return ''
  return form.password.length >= 6 ? '' : '密码至少需要6个字符'
})

// 社交登录提供商
const socialProviders = [
  { name: 'GitHub', icon: '🔗' },
  { name: 'Google', icon: '📧' }
]

// 表单提交
const handleSubmit = async () => {
  if (emailError.value || passwordError.value) {
    return
  }

  isLoading.value = true
  
  // 模拟登录请求
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    alert(`登录成功！\n邮箱: ${form.email}\n记住我: ${form.remember ? '是' : '否'}`)
  } catch (error) {
    alert('登录失败，请重试')
  } finally {
    isLoading.value = false
  }
}

// 社交登录
const handleSocialLogin = (provider: string) => {
  alert(`使用 ${provider} 登录 (功能演示)`)
}
</script>

<style scoped>
/* 组件特定样式 */
</style>
